<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f4f4f4;
            color: #333;
        }
        .message-container {
            max-width: 100%;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .message {
            border: 1px solid #ddd;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 5px;
            background-color: #f9f9f9;
            display: flex;
            align-items: center;
        }
        .message:last-child {
            margin-bottom: 0;
        }
        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
        }
        .message-content {
            flex: 1;
            font-size: 1.1em;
        }
        .timestamp {
            font-size: 0.9em;
            color: #888;
            margin-top: 5px;
        }
    </style>
</head>
<body>
<div id="message-container" class="message-container"></div>

<script>
    // 定义一个函数来获取最新消息
    async function fetchLatestMessages() {
        try {
            // const response = await fetch('http://localhost:8080/onebot/latest/text?limit=15');
            const response = await fetch('https://phantoms-backend.onrender.com/onebot/latest/text?limit=15');
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            const messages = await response.json();
            console.log('Received messages:', messages); // 调试信息
            displayMessages(messages);
        } catch (error) {
            console.error('Error fetching messages:', error);
        }
    }

    // 定义一个函数来展示消息
    function displayMessages(messages) {
        const container = document.getElementById('message-container');
        container.innerHTML = ''; // 清空之前的记录
        messages.forEach(message => {
            const messageDiv = document.createElement('div');
            messageDiv.className = 'message';

            // 解析时间戳
            const timestamp = new Date(
                message.timestamp[0],
                message.timestamp[1] - 1, // 月份从 0 开始
                message.timestamp[2],
                message.timestamp[3],
                message.timestamp[4],
                message.timestamp[5],
                message.timestamp[6]
            ).toLocaleString();

            // 解析消息内容
            let displayMessage = message.message;
            if (message.message.startsWith("{type=text, data={text=")) {
                const start = message.message.indexOf("{text=") + 6;
                const end = message.message.indexOf("}}", start);
                displayMessage = message.message.substring(start, end);
            }

            // 创建用户头像
            const avatarImg = document.createElement('img');
            avatarImg.className = 'user-avatar';
            avatarImg.src = `http://q1.qlogo.cn/g?b=qq&nk=${message.userId}&s=100`;

            // 创建消息内容
            const contentDiv = document.createElement('div');
            contentDiv.className = 'message-content';
            contentDiv.textContent = displayMessage;

            // 创建时间戳
            const timestampSpan = document.createElement('span');
            timestampSpan.className = 'timestamp';
            timestampSpan.textContent = timestamp;

            // 将头像、消息内容和时间戳添加到消息容器中
            messageDiv.appendChild(avatarImg);
            messageDiv.appendChild(contentDiv);
            messageDiv.appendChild(timestampSpan);

            container.appendChild(messageDiv);
        });
    }

    // 每 5 秒钟调用一次 fetchLatestMessages 函数
    setInterval(fetchLatestMessages, 5000);

    // 页面加载时立即获取一次消息
    fetchLatestMessages();
</script>

<!-- 引入访客统计模块 -->
<script src="../visitor-tracker.js"></script>
<!-- Cloudflare Web Analytics -->
<script defer src='../lib/cloudflare/beacon.min.js' data-cf-beacon='{"token": "0e55e488041949479a3dace73ef940cd"}'>
</script>
<!-- End Cloudflare Web Analytics -->

</body>
</html>